<!--校外时间段管理-->

<template>
  <div class="log">
    <basic-container>
      <el-row :span="24">
        <el-col :span="15">
          <el-form v-model="addform" style="padding-left: 20px">
            <h3 style="display: inline-block">时间组新增</h3>
            <el-form-item label="时间组名称" prop="timePlanName">
              <el-input v-model="addform.timePlanName" style="width: 55%;margin-left: 28px"></el-input>
            </el-form-item>
            <el-form-item label="时间组生效日期" prop="validTime">
              <el-date-picker
                  v-model="dateRange"
                  end-placeholder="结束日期"
                  format="yyyy 年 MM 月 dd 日"
                  range-separator="-"
                  start-placeholder="开始日期"
                  style="width: 55%"
                  type="daterange"
                  :clearable="false"
                  value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="时间状态" prop="states">
              <el-radio v-model="addform.states" label="0" :value="0" style="margin-left: 46px">正常</el-radio>
              <el-radio v-model="addform.states" label="1" :value="1">停用</el-radio>
            </el-form-item>
            <el-form-item label="高三级时间组" prop="isThirdGrade">
              <el-radio v-model="addform.isThirdGrade" label="0" :value="0" style="margin-left: 17px">是</el-radio>
              <el-radio v-model="addform.isThirdGrade" label="1" :value="1">否</el-radio>
            </el-form-item>
          </el-form>
          <h3 style="margin-left: 16px">已选时间段</h3>
          <avue-crud
              ref="crud"
              :data="SelectedData"
              :option="SelectedOption"
              @on-load="getList"
              @search-change="searchChange"
              @row-del="handleDel">
            <template slot="timerange" slot-scope="scope">
              {{ scope.row.timeFrameStart.substr(0,5) }}-{{ scope.row.timeFrameEnd.substr(0,5) }}
            </template>
            <template slot="weeks" slot-scope="scope">
             <el-checkbox-group v-model="scope.row.weeks">
                <el-checkbox-button label="1" value="周一">周一</el-checkbox-button>
                <el-checkbox-button label="2" value="周二">周二</el-checkbox-button>
                <el-checkbox-button label="3" value="周三">周三</el-checkbox-button>
                <el-checkbox-button label="4" value="周四">周四</el-checkbox-button>
                <el-checkbox-button label="5" value="周五">周五</el-checkbox-button>
                <el-checkbox-button label="6" value="周六">周六</el-checkbox-button>
                <el-checkbox-button label="7" value="周日">周日</el-checkbox-button>
              </el-checkbox-group>
            </template>
            <template slot="directions" slot-scope="scope">
              <el-checkbox-group v-model="scope.row.directions" class="direction">
                <el-checkbox-button label="0" value="进">进</el-checkbox-button>
                <el-checkbox-button label="1" value="出">出</el-checkbox-button>
              </el-checkbox-group>
            </template>
            <template slot="menu" slot-scope="scope">
              <el-button
                  class="filter-item"
                  size="mini"
                  type="danger"
                  @click="handleDel(scope.row)">删除
              </el-button>
            </template>
          </avue-crud>
          <el-form v-model="addform" style="padding-left: 20px">
            <h3 style="color: #000;">绑定优先特殊时间段</h3>
            <p style="font-size: 14px;color: red;margin: 10px 0">此项为非必填项,特殊时间段通行优先级大于时间组别内通行权限,且仅可设置一个</p>
            <el-form-item label="生效日期" prop="validTime">
              <el-date-picker
                  v-model="beforedateRange"
                  end-placeholder="结束日期"
                  format="yyyy 年 MM 月 dd 日"
                  range-separator="-"
                  start-placeholder="开始日期"
                  style="width: 55%;margin-left: 40px"
                  type="daterange"
                  value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="时间范围" prop="timeRange">
              <el-time-picker
                  v-model="beforetimeRange"
                  end-placeholder="结束时间"
                  format="HH:mm"
                  is-range
                  placeholder="选择时间范围"
                  range-separator="-"
                  start-placeholder="开始时间"
                  style="width: 55%;margin-left: 40px"
                  value-format="HH:mm:ss">
              </el-time-picker>
            </el-form-item>
            <el-form-item label="通行方向" prop="beforeDirections">
              <el-checkbox-group v-model="beforeDirections">
                <el-checkbox style="margin-left: 40px" label="0" value="进">进</el-checkbox>
                <el-checkbox label="1" value="出">出</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="8" style="float: right">
          <avue-crud
              ref="crud"
              :data="tableData"
              :option="tableOption"
              @search-change="searchChange">
            <template slot="timerange" slot-scope="scope">
              {{ scope.row.timeFrameStart.substr(0,5) }}-{{ scope.row.timeFrameEnd.substr(0,5) }}
            </template>
            <template slot="status" slot-scope="scope">
              <el-tag v-if="scope.row.status === 0">正常</el-tag>
              <el-tag v-if="scope.row.status === 1" type="danger">停用</el-tag>
            </template>
            <template slot="menu" slot-scope="scope">
              <el-button v-if="scope.row.flag === true" class="filter-item" size="mini" type="primary"
                         @click="choice(scope.row)">选择
              </el-button>
              <el-button v-else-if="scope.row.flag === false" disabled size="mini" type="primary">已选</el-button>
            </template>
          </avue-crud>
        </el-col>
        <el-col style="text-align: center">
          <el-button class="filter-item" size="small" @click="dictItemVisible()">取消</el-button>
          <el-button class="filter-item" size="small" type="primary" @click="handleUpdate()">保存</el-button>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import {timeFrame} from '@/api/pass/timeframe'
import {AddtimeframePlan} from '@/api/pass/time-edit'
import {AddtimePlan} from '@/api/pass/timeplan'
import {TIME_WEEK} from '@/const/TIME'

export default {
  name: 'outTime-add',
  data() {
    return {
      timeRange: '',
      dateRange: '',
      beforedateRange: '',
      beforetimeRange: '',
      beforeDirections: [],
      weeks: [],
      directions: [],
      dialogFormVisible: false,      //新增弹窗
      dialogEditVisible: false,
      tableData: [],
      SelectedData: [],
      tableLoading: false,
      addform: {
        timePlanName: '',
        states: '0',
        isThirdGrade:'0',
        validTimeStart: '',
        validTimeEnd: '',
        beforeDateStart: '',
        beforeDateEnd: ''
      },
      rules: {  //必填项（验证规则）
        states: [
          {required: true, trigger: "none"}
        ],
        timePlanName: [
          {required: true, trigger: "none"}
        ],
        validTime: [
          {required: true, trigger: "none"}
        ],
      },
      SelectedOption: {
        border: true,
        menuAlign: 'center',
        menuType: 'button',
        align: 'center',
        menuWidth: 80,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        maxHeight: 285,
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '时间段名',
            prop: 'timeName',
          },
          {
            label: '时间范围',
            prop: 'timerange',
            slot: true,
          },
          {
            label: '生效日',
            prop: 'weeks',
            width: 415,
            dicData: TIME_WEEK,
            slot: true,
          },
          {
            label: '进出属性',
            prop: 'directions',
            width: 110,
            slot: true,
          }
        ]
      },
      tableOption: {
        border: true,
        menuAlign: 'center',
        menuType: 'button',
        menuWidth: 80,
        align: 'center',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        maxHeight: 730,
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '时间段名',
            prop: 'timeName',
          },
          {
            label: '时间范围',
            prop: 'timerange',
            slot: true,
          },
          {
            label: '状态',
            prop: 'status',
            slot: true
          }
        ]
      }
    }
  },
  computed: {},

  methods: {
    getList(page, params) {
      timeFrame(Object.assign({
        descs: 'create_time',  //是否倒序
        size: 999
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.tableData.map(item => {
          this.$set(item, 'flag')
          item.flag = true
        })
        this.tableLoading = false
      })
    },
    choice: function (row) {
      this.SelectedData.push(row)
      this.SelectedData.map(item => {
        if (item.weeks === undefined || item.directions === undefined) {
          this.$set(item, 'weeks')
          this.$set(item, 'directions')
          item.weeks = []
          item.directions = []
        }
      })

      if (row.flag === true) {
        return row.flag = false
      }
      console.log(this.SelectedData)
    },

    handleDel: function (row) {
      this.$confirm('是否确认删除所选时间段？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let selectarr = this.SelectedData
        for (var i = 0; i < selectarr.length; i++) {
          if (selectarr[i].id === row.id) {
            selectarr.splice(i, 1);
            row.flag = true
          }
        }
        this.$message.success('删除成功')
      })
    },

    handleUpdate: function (row, done) {
      //校验
      // debugger
      if (this.addform.timePlanName === ''){
        this.$message.error('请输入时间组名称')
        return;
      }
      if (this.dateRange.length <= 0){
        this.$message.error('请选择时间组生效日期')
        return;
      }
      if (this.addform.states === ''){
        this.$message.error('请选择时间状态')
        return;
      }
      if (this.addform.isThirdGrade === ''){
        this.$message.error('请选择高三级时间组')
        return;
      }
      if (this.SelectedData.length <= 0){
        this.$message.error('请添加时间段')
        return;
      }
      if (this.SelectedData.length !== 0){
        for (var i = 0; i < this.SelectedData.length; i++){
          if (this.SelectedData[i].weeks.length <= 0){
            this.$message.error('请选择生效日')
            return;
          }
          if (this.SelectedData[i].directions.length <= 0){
            this.$message.error('请选择进出向')
            return;
          }
        }
      }

      //生效日期
      if (this.beforedateRange.length > 0){
        if (this.beforetimeRange.length <= 0){
          this.$message.error('请选择绑定优先特殊时间的时间范围')
          return;
        }
        if (this.beforeDirections.length <= 0){
          this.$message.error('请选择绑定优先特殊时间的通行方向')
          return;
        }
      }
      //时间范围
      if (this.beforetimeRange.length > 0){
        if (this.beforedateRange.length <= 0){
          this.$message.error('请选择绑定优先特殊时间的生效日期')
          return;
        }
        if (this.beforeDirections.length <= 0){
          this.$message.error('请选择绑定优先特殊时间的通行方向')
          return;
        }
      }
      //通行方向
      if (this.beforeDirections.length > 0){
        if (this.beforedateRange.length <= 0){
          this.$message.error('请选择绑定优先特殊时间的生效日期')
          return;
        }
        if (this.beforetimeRange.length <= 0){
          this.$message.error('请选择绑定优先特殊时间的时间范围')
          return;
        }
      }
      this.addform.validTimeStart = this.dateRange[0]
      this.addform.validTimeEnd = this.dateRange[1]
      this.addform.beforeDateStart = this.beforedateRange[0]
      this.addform.beforeDateEnd = this.beforedateRange[1]
      this.addform.beforeTimeStart = this.beforetimeRange[0]
      this.addform.beforeTimeEnd = this.beforetimeRange[1]
      if (this.beforeDirections.length > 1) {
        this.beforeDirections = ["2"]
      }
      this.addform.beforeDirection = this.beforeDirections.toString()

      this.addform.timeType = 0
      AddtimePlan(this.addform).then(res => {
        if (res.data.code === 0) {
          this.SelectedData.forEach((value, index) => {
            value.weeks.sort()
            value['timePlanId'] = res.data.data
            value['timeFrameId'] = value.id
            value['week'] = value.weeks.toString()
            if (value.directions.length > 1) {
              value.directions = ["2"]
            }
            value['direction'] = value.directions.toString()
          })
          AddtimeframePlan(this.SelectedData).then(res => {
            if (res.data.code === 0) {
              this.$message.success('添加成功')
            }
            this.$router.go(-1)
          })
        } else {
          this.$message.error('添加失败')
        }
      })

    },
    //取消
    dictItemVisible: function () {
      this.addform = {}
      this.$router.go(-1)
    },
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },

  }
}
</script>
<style scoped>
/deep/ .avue-crud__menu {
  display: none;
}
/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 10px!important;
}
/deep/.avue-crud__pagination{
  display: none;
}
/deep/.el-card__body{
  padding: 15px;
}
/deep/.direction .el-checkbox-button.is-checked .el-checkbox-button__inner{
  color: #FFFFFF !important;
  background-color: #67c23a !important;
  border-color: #fff !important;
  -webkit-box-shadow: -1px 0 0 0 #fff !important;
  box-shadow: -1px 0 0 0 #fff !important;
}
/deep/.direction span:hover{
  color: #67c23a!important;
}
/deep/.el-checkbox-button__inner{
  border: 1px solid #DCDFE6 !important;
}
.radio {
  margin-right: 12px;
  padding: 0;
}
h3{
  margin: 10px 0;
}
</style>
